<template>
  <IonPage>
    <IonContent>
      <!-- 底部导航栏 -->
      <div class="bottom_nav">
        <IonText router-link="/main"
          ><img src="../assets/images/calender2.png"
        /></IonText>
        <IonText router-link="/clock"
          ><img src="../assets/images/clock.png"
        /></IonText>
        <IonText router-link="/main"
          ><img src="../assets/images/add.png"
        /></IonText>
        <IonText router-link="/table"
          ><img src="../assets/images/view.png"
        /></IonText>
        <IonText router-link="/user">
          <img src="../assets/images/people.png" />
        </IonText>
      </div>
    </IonContent>
  </IonPage>
</template>
<style scoped>
/* 底部导航栏 */
.bottom_nav {
  width: 100%;
  bottom: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  position: fixed;
}
/* 底部导航栏图片 */
.bottom_nav img {
  height: 10vw;
}
</style>
<script setup>
import { IonContent, IonPage, IonText } from "@ionic/vue";
</script>
